<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style-type: none;
				overflow: hidden;
				text-align: center
			}
			
			li {
				float: left;
				border: 1px solid black;
			}
			
			#div1 {
				height: 50px;
				width: 240px;
				background-color: black;
				color: white;
			}
			
			#div2 {
				height: 50px;
				width: 240px;
				background-color: red;
				color: white;
			}
			
			#div3 {
				height: 50px;
				width: 240px;
				background-color: blue;
				color: white;
			}
			
			#div4 {
				height: 50px;
				width: 240px;
				background-color: skyblue;
				color: white;
			}
			
			.dd {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul id="boxmenu">
				<li data-id="div1">选项卡1</li>
				<li data-id="div2">选项卡2</li>
				<li data-id="div3">选项卡3</li>
				<li data-id="div4">选项卡4</li>
			</ul>
			<div id="div1" class="dd">内容1</div>
			<div id="div2" class="dd">内容2</div>
			<div id="div3" class="dd">内容3</div>
			<div id="div4" class="dd">内容4</div>
		</div>
		<script type="text/javascript">
			//动态添加事件
			var lis = document.getElementById("boxmenu").getElementsByTagName("li");
			for(var i = 0; i < lis.length; i++) {
				lis[i].onclick = function() {
					
					var boxdiv=document.getElementById("box");
					var divlist=boxdiv.getElementsByTagName("div");
					console.log(divlist);
					for (var k = 0; k < divlist.length; k++) {
						divlist[k].style.display="none"
					}
					var id=this.getAttribute("data-id");
					var div=document.getElementById(id);
						div.style.display="block";
				}
			}
		</script>
	</body>

</html>